<template>
  <view style="width: 100%;height: 100vh;background: rgba(0,0,0,0.4);position: fixed;top: 0;left: 0;display: flex;justify-content: center;align-items: center">
    <view style="background: #FFFFFF;border-radius: 16rpx;width: 80%;padding: 30rpx;text-align: center">
        <view style="font-size: 28rpx;color: #303133;font-weight: bold">请输入使用数量</view>
        <view style="padding: 50rpx 0 20rpx">
            <view style="display: flex;justify-content: center;">
                <label><text style="color: red;">*</text>数量(米) :</label>
                <input type="digit" @input="inputClick" v-model="num" placeholder="" style="width: 38%;border: 1px solid #ddd;border-radius: 4rpx;margin-left: 10rpx"/>
            </view>
            <view style="height: 50rpx;line-height: 50rpx">{{tooltip}}</view>
        </view>
        <view style="display: flex">
            <button :plain="true" type="warn" style="font-size: 28rpx;width: 140rpx;height: 48rpx;line-height: 48rpx;border-radius: 24rpx" @click.stop="cancel">取消</button>
            <button type="warn" style="font-size: 28rpx;width: 140rpx;height: 48rpx;line-height: 48rpx;border-radius: 24rpx" @click.stop="confirm">确认</button>
        </view>
    </view>
  </view>
</template>
<script>

export default {
  name: "editNumModal",
  components: {},
  props: {
  },
  data() {
    return {
        num:'',
        tooltip:''
    }
  },
  onShow() {
      this.num=''
  },
  methods: {
      cancel(){
          this.$emit('close')
      },
      confirm(){
          if(this.num<=0){
              this.tooltip='绑定数量必须大于0，请重新输入'
          }else{
              this.$emit('confirm',this.num)
          }
      },
      inputClick(){
          // let r = /^(0(\.\d+)?|([1-9]\d*(\.\d+)?))$/
          // console.log(r.test(this.num))
          // this.num=this.num.replace(/(0(\.\d+)?|([1-9]\d*(\.\d+)?))/,'')
          this.num=Number(this.num)
          if(this.num<=0){
              this.num=''
              this.tooltip='绑定数量必须大于0，请重新输入'
          }else{
              this.tooltip=''
          }
      }
  }
}
</script>

<style scoped lang="scss">
</style>